import http from '@/api/axios';
import BaseChart from '@/components/echarts/BaseChart';
import type { FinancialData } from '@/Interface/BrandInterface';
import { type EChartsOption } from 'echarts';
import { useEffect, useState } from 'react';
import { fontSizeRem } from '@/utils/fontSizeRem';

const AccountChart = () => {

  const [financialData, setFinancialData] = useState<FinancialData | null>(null)

  const finances = financialData?.financials || {}

  useEffect(() => {
    const getData = async () => {
      try {
        const res = await http.get('/api/financials');
        setFinancialData(res.data.data)
      } catch (error) {
        console.error('初始化数据失败:', error);
      }
    }
    getData()
  }, [])

  const options: EChartsOption = {
    title: {
      text: '企业财务趋势分析',
      left: 'center',
      top: "5%",
      textStyle: {
        fontSize: fontSizeRem(16),
        fontWeight: 'bold'
      }
    },
    backgroundColor: '',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#7791a6'
        }
      },
      formatter: (params: any) => {
        let html = `<div style="margin: 0 0 5px;font-weight:500">${params[0].name}</div>`;
        params.forEach((item: any) => {
          const unit = item.seriesName.includes('增长') ? '%' : '亿元';
          const value = item.seriesName.includes('增长')
            ? item.value.toFixed(1)
            : item.value.toLocaleString();

          html += `
          <div style="display: flex; align-items: center; margin: 5px 0;">
            <span style="display:inline-block;width:10px;height:10px;background:${item.color};border-radius:50%;margin-right:8px"></span>
            <span style="flex:1">${item.seriesName}：</span>
            <span style="font-weight:bold;color:${item.color}">${value}${unit}</span>
          </div>
        `;
        });
        return html;
      }
    },
    legend: {
      type: 'scroll',
      bottom: 5,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: fontSizeRem(14)
      }
    },
    grid: {
      left: 55,
      right: 50
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: Object.keys(finances).sort(),
      axisLabel: {
        color: '#fff',
        fontSize: fontSizeRem(14)
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '金额 (亿元)',
        nameTextStyle: {
          padding: [0, 10, 0, 0],
          color: '#fff',
          fontSize: fontSizeRem(14)
        },
        splitLine: {
          lineStyle: {
            color: '#cbcbcb65', // 设置横线颜色
            width: 1,         // 线宽
            type: 'solid'     // 线型 (solid | dashed | dotted)
          }
        },
        axisLabel: {
          formatter: (value: number) => `${value.toLocaleString()}`,
          color: '#fff',
          fontSize: fontSizeRem(14)
        }
      },
      {
        type: 'value',
        name: '增长率 (%)',
        position: 'right',
        axisLabel: {
          formatter: (value: number) => `${value}%`,
          color: '#fff',
          fontSize: fontSizeRem(14)
        },
        splitLine: {
          show: false
        },
        nameTextStyle: {
          padding: [0, 0, 0, 15],
          color: '#fff',
          fontSize: fontSizeRem(14)
        },
      }
    ],
    series: [
      {
        name: '营业收入',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        data: Object.values(finances).map(v => v.revenue),
        lineStyle: {
          width: 2
        }
      },
      {
        name: '营业收入增长',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbol: 'triangle',
        data: Object.values(finances).map(v => v.revenue_growth),
        lineStyle: {
          type: 'dashed'
        }
      },
      {
        name: '净利润',
        type: 'line',
        smooth: true,
        symbol: 'rect',
        data: Object.values(finances).map(v => v.net_profit),
        lineStyle: {
          width: 2
        }
      },
      {
        name: '净利润增长',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbol: 'diamond',
        data: Object.values(finances).map(v => v.profit_growth),
        lineStyle: {
          type: 'dashed'
        }
      },
      {
        name: '市值',
        type: 'line',
        smooth: true,
        symbol: 'arrow',
        data: Object.values(finances).map(v => v.market_cap),
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8
        }
      }
    ]
  };


  return (
    <div style={{ width: "100%", height: '30vh' }}>
      <BaseChart option={options} theme="dark" />
    </div>
  );
};

export default AccountChart;